<template>
  <div>
    <!-- 新增商品添加规格 弹窗 -->
    <el-dialog :visible="visible" title="" class="dialog" width="60%" @close="closeDialog">
      <div>
        <div class="specImgWarp">
          <el-form
            ref="specificationForm"
            :model="addForm"
            :rules="rule"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="24">
                <div class="specImgBox">
                  <vueCropper
                    :cropper-model="imgsCurData.url"
                    :disable="true"
                    :img-list.sync="addForm.cover"
                    :fixed-number="[16,16]"
                    :limit="1"
                    class="upload-demo"
                    @modalShowFn="spectFn" />
                  <div class="specImgCon">
                    <img :src="specImgPath" class="specImgPath" alt="">
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="name" label="商品规格">
                  <el-input v-model="addForm.name" placeholder="请填写商品规格"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="retailPrice" label="门市价">
                  <el-input v-model="addForm.retailPrice" placeholder="请填写门市价"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="salePrice" label="销售价">
                  <el-input v-model="addForm.salePrice" placeholder="请填写销售价"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="stock" label="商品库存">
                  <el-input v-model="addForm.stock" placeholder="请填写商品库存"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="bottomButton" style="height:60px">
          <el-button v-preventReClick type="primary" @click="addFormFn('specificationForm')">确定</el-button>
          <el-button v-preventReClick type="info" @click="closeDialog()">取消</el-button>
        </div>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import vueCropper from '@/components/cropper'
import UploadImg from '@/components/cropper/uploadImage.vue'
import { Message } from 'element-ui'
import { checkNotEmail, checkNum, checkStudentNum } from '@/utils/validateUtil';

const validateStudentNum = (rule, value, callback) => {
  if (!checkStudentNum(value)) {
    callback(new Error())
  }
  callback()
};

export default {
  components: { vueCropper, UploadImg },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    spedata: {
      type: Array,
      required: true
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listLoading: false,
      isUpload: true,
      specImgPath: '',
      imgsCurData: {
        url: ''
      },
      sendList: [],
      addForm: {
        name: '',
        picUrl: '',
        retailPrice: '',
        salePrice: '',
        stock: ''
      },
      rule: {
        name: [
          { required: true, message: '请填写商品名称', trigger: 'blur' }
        ],
        retailPrice: [
          { required: true, message: '请填写门市价', trigger: 'blur' },
          { pattern: /(?!^0*(\.0{1,2})?$)^\d{1,13}(\.\d{1,2})?$/, message: '请输入正确的数字，并且小数点后最多保留两位数字', trigger: 'blur' }
        ],
        salePrice: [
          { required: true, message: '请填写销售价', trigger: 'blur' },
          { pattern: /(?!^0*(\.0{1,2})?$)^\d{1,13}(\.\d{1,2})?$/, message: '请输入正确的数字，并且小数点后最多保留两位数字', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请填写库存', trigger: 'blur' },
          { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '数值需大于0', trigger: 'blur' },
          { validator: validateStudentNum, message: '请输入整数', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {

  },
  mounted() {
  },
  methods: {
    addFormFn(formName) {
    //   if (!this.sendList.length) {
    //     Message.error('请添加规格')
    //     return
    //   }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.addForm.picUrl) {
            Message.error('请添加规格缩略图')
            return
          }
          console.log(this.addForm)
          this.$emit('specification', this.addForm)
          this.closeDialog()
        }
      })
    },
    addSpecList(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.addForm.picUrl) {
            Message.error('请添加规格缩略图')
            return
          }
          // this.sendList.push(this.addForm)
        }
      })
    },
    // deleteFn(index) {
    //   console.log(index)
    //   this.sendList.splice(index, 1)
    // },
    closeDialog() {
      // this.sendList = []
      this.$emit('update:visible', false)
      this.addForm = {}
      this.imgsCurData.url = ''
      this.specImgPath = ''
    },
    spectFn(url) {
      this.isUpload = false
      this.specImgPath = url
      this.imgsCurData.url = url
      this.addForm.picUrl = url
    }
  }
}
</script>>
<style scoped>
    .fl{
        float: left;
    }
    .fr {
        float: right
    }
    .ml10{
        margin-left: 10px;
    }
    .dialog{
        padding:10px;
    }
    .mimiButton{
        height: 40px;
        width: 80px;
    }
    .bottomButton{
        height: 70px;
        padding-top: 10px;
        border-top: 1px solid #DDD;
        width: 100%;
        height: 40px;
        text-align: center;
    }
    .specImgCon{
        width:48px;
        height: 48px;
        border: 1px dashed #ddd;
        margin-top: -10px;
        margin-left: 10px;
    }

    .specImgPath{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .specImgWarp{
        width: 98%;
        padding:4px;
        display: flex;
        flex-wrap: nowrap
    }
    .specImgBox{
        width:196px;
        margin-left: 40px;
        margin-right: 20px;
        display: flex;
        flex-wrap: nowrap
    }
    .input{
        margin-left: 10px;
    }
    .specTitle{
        margin: 0 0 40px 4.5%;
        line-height: 50px;
        font-size: 14px;
    }
    .bottomDiv{
        padding:0 0 20px 11%;
    }
    .demo-ruleForm{
        width: 60%;
    }
</style>
